<template>
  <view class="container" @click.stop="onClick">
    <image class="img" :src="imgSrc" mode="aspectFill" />
    <view class="text-box">
      <view v-if="title" class="title" :class="{ 'max-line-one': !isProduct, 'max-line-two': isProduct }">{{ title }}
      </view>
      <view class="subtitle">
        <text v-if="subtitle" class="content">{{ subtitle }}</text>
        <block v-if="isProduct"><text class="sale-price">¥{{ info.salePrice }}</text><text class="rise">起</text>
          <text
            class="cross-line-price" v-if="info.marketPrice !== null && info.marketPrice !== ''">¥{{ info.marketPrice }}</text>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    mode: {
      /// poi 或者 article 或者 product
      type: String,
      default: 'poi',
      required: true
    },
    info: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    onClick() {
      if (this.mode == 'poi') {
        uni.navigateTo({
          url: '/ai/pages/POIDetail/index?poiId=' + this.info.poiId
        })
      } else if (this.mode == 'product') {
        const { productId, productTypeId, poiId, supplierProductId } = this.info
        const param = { productId, productType: productTypeId, poiId, supplierProductId }
        this.$productUrlJump(param, true)
      } else {
        uni.navigateTo({
          url: '/ai/pages/notedetails/notedetails?articleId=' + this.info.articleId
        })
      }
    }
  },
  computed: {
    imgSrc() {
      if (this.mode == 'poi') {
        return this.info.imageUrl
      } else if (this.mode == 'product') {
        return this.info.mainPictureUrl
      } else {
        return this.info.coverImageUrl
      }
    },
    title() {
      if (this.mode == 'poi') {
        return this.info.poiTitle
      } else if (this.mode == 'product') {
        return this.info.productName
      } else {
        return this.info.articleTitle
      }
    },
    subtitle() {
      return this.info.introduction
    },
    isProduct() {
      return this.mode == 'product'
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  padding: 10rpx;
  background: #FFFFFF;
  width: 454rpx;
  margin:10rpx auto 0 auto;
  border-radius: 16rpx;
  .img {
    width: 114rpx;
    height: 114rpx;
    border-radius: 10rpx;
    flex-shrink: 0;
  }

  .text-box {
    margin-left: 20rpx;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .max-line-one {
      @include maxLine(1);
    }

    .max-line-two {
      @include maxLine(2);
    }

    .title {
      margin-bottom: 14rpx;
      color: #4D566A;

      font: {
        size: 28rpx;
        weight: 600;
        color: $sl-color-dark-grey;
      }

    }

    .subtitle {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      // flex-grow: 1;
      margin-bottom: 8rpx;

      .content {
        @include maxLine(2);
        flex-grow: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #848891;
        line-height: 34rpx;
        line-break: anywhere;
      }

      .sale-price {
        font-size: 28rpx;
        color: $sl-color-price;
        line-height: 20rpx;
      }

      .rise {
        margin-left: 3rpx;
        font-size: 20rpx;
        color: $sl-color-light-grey;
        line-height: 20rpx;
      }

      .cross-line-price {
        margin-left: 13rpx;
        font-size: 20rpx;
        color: $sl-color-light-grey;
        line-height: 20rpx;
        text-decoration: line-through
      }

      .icon {
        flex-shrink: 0;
      }
    }
  }
}
</style>